<template>
  <div class="forget">
    <div class="title">找回密码</div>
    <div class="step">
      <m-step :steps="steps" :active="active" />
    </div>
    <!-- 第一步 -->
    <div v-show="active === 0" class="form-wrap">
      <m-form ref="form" :model="formData" :rules="rules">
        <m-form-item prop="mobile">
          <m-input
            v-model="formData.mobile"
            placeholder="请输入您的手机号或邮箱账号"
          >
            <img
              slot="prefix"
              src="~/assets/images/login-mobile-icon.png"
              alt=""
              style="width: 15px; height: 22px;"
            />
          </m-input>
        </m-form-item>
        <m-form-item prop="msg">
          <div
            style="width: 100%; display: flex; justify-content: space-between;"
          >
            <m-input
              style="width: 300px;"
              v-model="formData.msg"
              placeholder="请输入短信或邮箱验证码"
            >
              <img
                slot="prefix"
                src="~/assets/images/login-msg-icon.png"
                alt=""
                style="width: 16px; height: 14px;"
              />
            </m-input>
            <m-button :disabled="flag" @click="phoneCaptcha()" width="130">{{
              content
            }}</m-button>
          </div>
        </m-form-item>
        <m-form-item v-if="active < 2" style="margin-top: 60px;">
          <div style="width: 100%; display: flex; justify-content: center;">
            <m-button width="235" @click="next()">下一步</m-button>
          </div>
        </m-form-item>
        <div class="back">
          <img src="~/assets/images/top-back-icon.png" alt="" />
          <router-link to="/login-register/login">返回登录</router-link>
        </div>
      </m-form>
    </div>
    <!-- 第二步 -->
    <div v-show="active === 1" class="form-wrap">
      <m-form ref="form" :model="formData" :rules="rules">
        <m-form-item prop="password">
          <m-input
            v-model="formData.password"
            type="password"
            placeholder="请输入新密码"
          >
            <img
              slot="prefix"
              src="~/assets/images/login-password-icon.png"
              alt=""
              style="width: 16px; height: 20px;"
            />
          </m-input>
        </m-form-item>
        <m-form-item prop="twice">
          <m-input
            v-model="formData.twice"
            type="password"
            placeholder="请再次输入新密码"
          >
            <img
              slot="prefix"
              src="~/assets/images/login-twice-icon.png"
              alt=""
              style="width: 18px; height: 22px;"
            />
          </m-input>
        </m-form-item>
        <m-form-item v-if="active < 2" style="margin-top: 60px;">
          <div style="width: 100%; display: flex; justify-content: center;">
            <m-button width="235" @click="next()">下一步</m-button>
          </div>
        </m-form-item>
      </m-form>
      <div class="back">
        <img src="~/assets/images/top-back-icon.png" alt="" />
        <router-link to="/login-register/login">返回登录</router-link>
      </div>
    </div>
    <!-- 第三步 -->
    <div v-show="active === 2" class="form-wrap">
      <div
        style="width: 100%; display: flex; flex-direction: column; align-items: center;"
      >
        <img
          src="~/assets/images/forget-success-icon.png"
          alt=""
          class="success"
        />
        <m-button width="235" @click="toLogin()">去登录</m-button>
      </div>
    </div>
  </div>
</template>

<script>
import MStep from "@/components/common/m-step/MStep"
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MInput from "@/components/common/m-input/MInput"
import MButton from "@/components/common/m-button/MButton"
import { password, emailPhone } from "@/utils/validates"
import { getPhoneCaptcha, checkVerify, setpwd } from "@/request/api"

export default {
  name: "Forget",
  components: { MButton, MInput, MFormItem, MForm, MStep },
  data() {
    const twice = (rule, val, cb) => {
      if (val === "") {
        cb(new Error("请再次输入密码"))
      } else if (val !== this.formData.password) {
        cb(new Error("两次密码不同"))
      } else if (!val) {
        cb(new Error("请重复输入密码"))
      } else {
        cb()
      }
    }
    return {
      steps: [
        { title: "身份验证" },
        { title: "设置新密码" },
        { title: "完成" }
      ],
      active: 0,
      formData: {},
      rules: {
        mobile: [{ validator: emailPhone, trigger: "blur" }],
        password: [{ validator: password, trigger: "blur" }],
        twice: [{ validator: twice, trigger: "blur" }],
        msg: [{ required: true, message: "请输入短信验证码", trigger: "blur" }]
      },
      flag: false,
      content: "获取短信验证码",
      totalTime: 60
    }
  },
  methods: {
    // 判断输入是否是手机号
    isPhoneNumber(tel) {
      const reg = /^0?1[3|4|5|6|7|8][0-9]\d{8}$/
      return reg.test(tel)
    },
    phoneCaptcha() {
      let that = this
      let phone = this.formData.mobile
      if (this.isPhoneNumber(phone)) {
        if (that.checkMobile(phone)) {
          getPhoneCaptcha({
            phone: this.formData.mobile,
            type: "retrieve_password",
            code: "",
            key: ""
          }).then(res => {
            if (res.status === 200) {
              this.flag = true
              this.content = this.totalTime + "s后重新发送"
              let clock = window.setInterval(() => {
                this.totalTime--
                this.content = this.totalTime + "s后重新发送"
                if (this.totalTime < 0) {
                  window.clearInterval(clock)
                  this.content = "重新发送验证码"
                  this.totalTime = 60
                  this.flag = false
                }
              }, 1000)
            } else {
              that.$toast.show(res.message, 1000, false)
            }
          })
        }
      }
    },
    next() {
      let that = this
      if (Number(that.active) === 0) {
        if (that.checkMobile(that.formData.mobile)) {
          if (!that.formData.msg) {
            that.$toast.show("验证码不能为空", 1000, false)
            return false
          } else {
            checkVerify({
              phone: that.formData.mobile,
              sms_code: that.formData.msg
            }).then(res => {
              if (res.status === 200) {
                that.active += 1
              } else {
                that.$toast.show(res.message, 1000, false)
                //暂时 TODO
                that.active += 1
              }
            }).catch(err => {
              that.$message.error(err.message)
            })
          }
        }
      } else if (this.active === 1) {
        if (!this.formData.password || !this.formData.twice) {
          that.$toast.show("密码不能为空", 1000, false)
          return false
        } else if (
          this.formData.password.length < 6 || this.formData.twice.length < 6
        ) {
          that.$toast.show("密码不能少于6位数", 1000, false)
          return false
        } else if (this.formData.password !== this.formData.twice) {
          that.$toast.show("两次密码不一致", 1000, false)
          return false
        } else {
          setpwd({
            phone: that.formData.mobile,
            pwd: that.formData.twice
          }).then(res => {
            if (res.status === 200) {
              this.active += 1
            } else {
              that.$toast.show(res.message, 1000, false);
              //暂时 TODO
              that.active += 1
            }
          }).catch(err => {
            that.$message.error(err.message)
          })
        }
      }
    },
    checkMobile(phone) {
      if (!phone) {
        this.$toast.show("请填写手机号", 1000, false)
        return false
      } else if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(phone)) {
        this.$toast.show("请填写正确的手机号", 1000, false)
        return false
      } else {
        return true
      }
    },
    toLogin() {
      this.$router.push({
        path: "/login-register/login"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.forget {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .title {
    color: $theme-color-1;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .step {
    width: 75%;
    margin-bottom: 60px;
  }

  .form-wrap {
    width: 439px;

    .back {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #969696;

      img {
        width: 16px;
        height: 13px;
        margin-right: 5px;
      }
    }

    .success {
      width: 69px;
      height: 69px;
      margin-bottom: 100px;
    }
  }
}
</style>
